<template>
	<view class="pagesContent">
		<view class="pagesContentView">
			<view class="content">
				<view class="imagesView" v-if="filesType == 'PICTURE' || filesType == 'ALL_PICTURE'">
					<image class="icon" :src="item.filePath" mode="aspectFit"></image>
				</view>
				<view class="videoView" v-if="filesType == 'VIDEO' || filesType == 'ALL_VIDEO'">
					<view class="video_">
						<video class="myVideo" id="myVideo" ref="myVideo" :src="videoPath" :controls="controls"
							:show-center-play-btn="showCenterPlayBtn" @timeupdate="timeupdate" @ended="videoEnd"
							:title="videoTitle" @error="videoErrorCallback" enable-danmu danmu-btn>
						</video>
						<view class="options">
							<view class="left">
								<image class="icon" v-if="payStatus == 0 " @click="play"
									src="../../static/images/start.png" mode=""> </image>
								<image class="icon" v-if="payStatus == 1 " @click="pause"
									src="../../static/images/stop.png" mode=""> </image>
							</view>
							<view class="right">
								<view class="payTime">{{ payTime |sToM("all") }}</view>
								<view class="box">
									<view class="bg">
										<view class="line" :style="{'width' :  progress + '%' }"> </view>
									</view>
								</view>
								<view class="allTime">{{ time |sToM("all") }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="fileMessage">
				<view class="item">
					<view class="left">
						<view class="fileName"> 文件名： </view>
						<view class="message">{{ item.fileName | sliceFileName }} </view>
					</view>
					<view class="right"> 文件大小：{{ item.fileSize | getFileSize }} </view>
				</view>
				<view class="clear"> </view>
				<view class="fileTitle" style="display: flex;">
					<view class="addressName" style="float: left;">文件地址：</view>
					<view class="addressMessage" style="flex: 1; word-break: break-all;">{{item.filePath}}</view>
				</view>
			</view>
			<view class="foo" id="foo">
				<view class="btn ">
					<view class="item" @click="delSelectFiles">
						<view class="text">删除</view>
					</view>
					<view class="item" v-if="previewFrom == 'files'">
						<view class="text export" @click="exportFile"> 导出 </view>
					</view>
				</view>
			</view>
		</view>
		<delPopup ref="delPopupView" :popup_position="popup_position" @del_confirm="delFiles"></delPopup>
		<exportPopup ref="exportPopup" :popup_position="popup_position"></exportPopup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import service from "../../util/service.js"

	import {
		getMemInfo
	} from "../../util/util.js"

	const Audio = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				popup_Type: "del",
				showExportBtn: true,
				filesType: "",
				Audio: null,
				selectItem_id: null, //item 全部信息
				item: "",
				videoPath: null,
				auditPath: null,
				controls: false,
				showCenterPlayBtn: false,
				videoTitle: "----",
				payStatus: 0,
				payStatus_audit: 0,
				payTime: "0:0",
				time: "0:0",
				progress: 0,
				current: {
					poster: '',
					name: '',
					author: '',
				},
				audioAction: {
					method: 'pause'
				},
				duration: "0:0",
				currentTime: "0:0",
				storeList: [],
				previewFrom: null,
				popup_position: "center"



			}
		},

		onShow() {
			console.log("onShow")
			let this_ = this;
			// this.$nextTick(() => {
			// 	this.popup_position = "center"
			// 	this.$refs.delPopupView.popupOpen()
			// })
			// return
			uni.setStorageSync("showHInt", "hide") //不显示功能使用需知
			uni.setStorageSync("startInitType", "off") //进入扫描界面后   不扫描
			this.showExportBtn = uni.getStorageSync("showExportBtn")
			if (!this_.hasLogin) {
				uni.reLaunch({
					url: "/pages/user/login"
				})
			} else {
				uni.setStorageSync("showHInt", "hide")
				this.previewFrom = uni.getStorageSync("previewFrom");
				this.scanType = uni.getStorageSync("scanType"); //搜索文件类型对象				
				this.filesType = this.scanType;
				this.selectItem_id = uni.getStorageSync("selectItem_id") || null //文件对象				
				console.log(uni.getStorageSync("selectItem"))
				this.item = JSON.parse(uni.getStorageSync("selectItem"))
			}

		},
		onReady() {
			console.log("onReady")
			let this_ = this;
			if (this.filesType == 'ALL_VIDEO' || this.filesType == "VIDEO") {
				this.videoPath = this.item.filePath;
				console.log("videoPath:", this.videoPath);
				this.videoContext = uni.createVideoContext('myVideo');
				uni.getVideoInfo({
					src: this_.videoPath,
					success(res) {
						console.log(res)
						this_.time = res.duration.toFixed(2);
					},
					fail(err) {
						console.log(err)
					}
				})
			}

		},
		onHide() {
			console.log("onHide")
			this.closePlayIn()


		},
		onBackPress() {
			console.log("侧滑");
			this.closePlayIn()
		},
		computed: {
			...mapGetters(["hasLogin", "userInfo"])
		},

		methods: {

			// 关闭正在播放的音频或者视频
			closePlayIn() {
				// #ifdef APP
				if (this.filesType == 'ALL_VIDEO' || this.filesType == "VIDEO") {
					console.log('视频关闭');
					this.pause()
				}

				// #endif
			},
			// 播放视频
			play() {
				console.log('播放视频');
				this.payStatus = 1
				this.videoContext.play()
			},
			// 暂停视频
			pause() {
				console.log('暂停视频');
				this.payStatus = 0
				this.videoContext.pause()
			},
			//视频播放结束
			videoEnd() {
				console.log("视频播放结束")
				this.payStatus = 0
				this.progress = 0
				this.currentTime = 0
			},
			//视频播放中
			timeupdate(e) {
				this.payTime = e.detail.currentTime.toFixed(2)
				this.progress = parseInt((e.detail.currentTime / e.detail.duration).toFixed(2) * 100)
				if (this.progress == 100) {
					this.payStatus = 0
				}
			},

			videoErrorCallback: function(e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},



			// 删除按钮
			delSelectFiles() {
				console.log(this.scanType)
				if (this.scanType == 'ALL_VIDEO' || this.scanType == 'VIDEO') {
					this.popup_position = "bottom"
				} else {
					this.popup_position = "center"
				}
				this.$refs.delPopupView.popupOpen()
			},
			// 确认删除
			delFiles() {
				this.FileManagerModule.deleteFile(this.item.filePath, (res) => {
					console.log(res)
					if (res) {
						this.text("删除成功")
						uni.setStorageSync("delItem", JSON.stringify(this.item))
						console.log("this.previewFrom ", this.previewFrom)

					} else {
						this.text("删除失败")
					}
				})
			},


			// 导出文文件
			exportFile() {
				uni.showLoading({
					title: "文件导出中请稍候",
					mask: true,
				})
				this.FileManagerModule.exportFile(this.item.filePath, "/storage/emulated/0/Download/export/" +
					this.item.fileName, (res) => {
						console.log(res)
						uni.hideLoading()
						if (res) {
							this.item.filePath = "/storage/emulated/0/Download/export/" + this.item.fileName //修改对象历史路径
							this.text("导出成功")

						} else {
							this.text("导出失败,可能已经导出过了")
						}
					})

			},


		}
	}
</script>
<style>
	page {
		background: #ffffff;
	}
</style>

<style lang="scss" scoped>
	.pagesContent {
		padding-top: 61.54rpx;
		height: 100vh;
		background: linear-gradient(180deg, #E1EBFF 0%, #FAFCFF 100%);
		overflow: hidden;

		.pagesContentView {
			width: 100%;
			height: 100%;

			.content {
				position: absolute;
				top: 43rpx;
				left: 32rpx;
				right: 32rpx;
				bottom: 380rpx;

				.imagesView {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						display: flex;
						width: 100%;
						height: 100%;
					}
				}


				.videoView {
					width: 100%;
					height: 100%;

					.video_ {
						width: 100%;
						height: 624rpx;

						.myVideo {
							width: 100%;
							height: 514rpx;
							margin-bottom: 48rpx;
						}

						.auditView {
							padding-top: 113rpx;

							.icon {
								display: block;
								width: 180rpx;
								height: 180rpx;
								margin: 0 auto 16rpx;
							}

							.name {
								text-align: center;
								height: 48rpx;
								font-size: 32rpx;
								font-weight: 500;
								color: #272525, 100%;
								line-height: 48rpx;
								margin-bottom: 154rpx;
							}
						}

						.options {
							height: 64rpx;
							display: flex;
							padding: 0 20rpx;

							.left {
								float: left;

								.icon {
									width: 64rpx;
									height: 64rpx;
								}
							}

							.right {
								flex: 1;
								display: flex;

								.payTime {
									float: left;
									padding: 0 10rpx;
									text-align: center;
									line-height: 64rpx;
									color: rgba(0, 0, 0, 0.85);
								}

								.box {
									flex: 1;
									padding-top: 26rpx;

									.bg {
										height: 6px;
										background: #B8E0FF;
										border-radius: 20rpx;
										overflow: hidden;

										.line {
											width: 50%;
											height: 12rpx;
											background: #2D6AEA;
											border-radius: 20rpx;
										}
									}
								}

								.allTime {
									float: right;
									padding: 0 10rpx;
									text-align: center;
									line-height: 64rpx;
									line-height: 64rpx;
									color: rgba(0, 0, 0, 0.85);


								}
							}

							.openFiles {
								border: 2rpx solid #2D6AEA;
								/* 矩形 330 */
								width: 156rpx;
								height: 56rpx;
								margin: 0 auto;
								border-radius: 4px;
								text-align: center;
								line-height: 56rpx;
								color: #2D6AEA;
								font-weight: 400;
								font-size: 28rpx;
							}
						}
					}

				}
			}

			.fileMessage {
				position: absolute;
				bottom: 210rpx;
				left: 50%;
				margin-left: -343rpx;
				width: 632rpx;
				height: 174rpx;
				background: #EEF3FF;
				border-radius: 20px;
				padding: 30rpx 27rpx;
				font-size: 24rpx;
				font-weight: 400;
				// color: #454655;
				line-height: 44rpx;


				.item {
					display: flex;


					.left {
						flex: 1;
						height: 44rpx;
						display: flex;

						.fileName {
							float: left;
						}

						.message {
							flex: 1;
						}

					}

					.right {
						float: right;
					}

					.address_ {


						display: flex;

						.addressName {
							float: left;
							width: 50rpx;
							overflow: hidden;
							color: red;
						}

						.addressMessage {
							color: red;
							flex: 1;
							word-break: break-all;
						}

					}
				}
			}

			.foo {
				position: absolute;
				left: 50%;
				margin-left: -250rpx;
				bottom: 40rpx;
				width: 500rpx;
				height: 72rpx;

				background: #ffffff;

				.btn {
					display: flex;
					height: 72rpx;

					.item {
						flex: 1;
						height: 72rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.text {
							width: 220rpx;
							height: 72rpx;
							line-height: 72rpx;
							border-radius: 8rpx;
							border: 2rpx solid #0073F5;
							text-align: center;
							font-size: 24rpx;
							color: #343333;
							margin: 0 auto;
						}

						.export {
							border: 0;
							background: #0073F5;
							color: #ffffff;
						}


					}
				}




			}

		}
	}
</style>